<template>
	<view>
		<view class="suggest">
			<view class="sug_type">
				<text>问题类型</text>
				<view class="choose">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
					<image src="../../static/first/right.png" class="imgs"></image>
				</view>
			</view>
			<view class="sug_des">
				问题描述
			</view>
			<view class="content">
				<textarea v-model="descript" class="textarea" placeholder-class="tet"
					placeholder="请描述您遇到的问题"></textarea>
			</view>
			<view class="contact_type">
				<text>联系方式</text>
				<input type="text" placeholder="请输入联系方式" v-model="contactNumber">
			</view>
		</view>

		<view class="btn" @click="confirm()">
			<button>保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: [],
				index: 0,
				descript: '',
				contactNumber: '',
				questionType: ''
			}
		},
		onLoad() {
			this.getQuestion()
		},
		methods: {
			//修改问题类型
			bindPickerChange: function(e) {
				this.index = e.target.value
				this.questionType = this.array[this.index]
			},
			//选择问题类型
			getQuestion() {
				uni.request({
					url: this.$serverUrl + '../dictDetail/map',
					data: {
						"dictName": "question"
					},
					success: (res) => {
						let arr = []
						arr.push('请选择问题类型')
						for (let i = 0; i < res.data.question.length; i++) {
							arr.push(res.data.question[i].value)
						}
						this.array = arr
					}
				})
			},
			//提示
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			//提交
			confirm() {
				let contactNumberReg = /^1[0-9]{10}$/
				let contactNumberCheck = RegExp(contactNumberReg).test(this.contactNumber)
				if (this.questionType == '' || this.questionType == '请选择问题类型') {
					this.showToast('请选择问题类型')
				} else if (this.descript == '') {
					this.showToast('请输入问题描述')
				} else if (!contactNumberCheck || this.contactNumber == '') {
					this.showToast('请检查联系方式')
				} else {
					uni.request({
						url: this.$serverUrl + 'ftFeedback',
						method: 'POST',
						data: {
							"contactNumber": this.contactNumber,
							"descript": this.descript,
							"questionType": this.questionType,
							"feedbackTime": new Date()
						},
						success: (res) => {
							this.showToast('提交成功，感谢您的反馈工作人员查看后将会联系您')
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.suggest {
		margin: 0 36upx;
		/* background-color: #007AFF; */
		height: 100%;
	}

	.sug_type {
		color: #333333;
		height: 124upx;
		border-bottom: 1px solid #f1f1f1;
		display: flex;
		/* align-items: center; */
		line-height: 124upx;
	}

	.sug_type text {
		// width:160upx;
	}

	.choose {
		margin-left: 52upx;
		color: #999999;
		height: 124upx;
		// background-color: #007AFF;
		width: 70%;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.uni-list-cell-db {
		// height: 124upx;
		// display: flex;
		// justify-content: space-between;
		// align-items: center;
	}

	.imgs {
		width: 28upx;
		height: 28upx;
	}

	.sug_des {
		line-height: 124upx;
		color: #333333;
		height: 124upx;
		border-bottom: 1px solid #f1f1f1;

	}

	.contact_type {
		display: flex;
		height: 124upx;
		border-bottom: 1px solid #f1f1f1;
		display: flex;
		align-items: center;
	}

	.contact_type input {
		margin-left: 52upx;

	}

	/* 添加按钮 */
	.btn {
		width: 100%;
		height: 124upx;
		position: fixed;
		bottom: 20upx;

	}

	.btn button {
		margin: 0upx 36upx;
		background-color: #00B2CA;
		color: #FFFFFF;
	}

	.uni-input {
		height: 282upx;
		margin-left: 50rpx;
		margin-bottom: -150rpx;
	}

	/deep/.uni-input[data-v-a95e22bc] {
		height: 124upx;
	}

	.textarea {
		margin-top: 20upx;
		height: 262upx;
		// color: red;
	}

	.tet {
		color: #999999;
		// margin:28upx 0 0 26upx;
	}
</style>
